<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
   <div class="h_center_right" :style="{ width: rightFrameInfo.range + 'px' }">
      <div class="h_fold_button" v-if="rightFrameInfo.fold" @click="onLayoutHandel('RightFold')">➡️</div>
      <div class="h_fold_button" v-else @click="onLayoutHandel('RightFold')">⬅️</div>
      <div class="h_navigation">
         <!--折叠框 -->
         <div class="h_navigation_left" v-if="rightFrameInfo.fold">
            <RightProject v-if="onGetRightFrameActive('RightProject')"></RightProject>
            <RightSelect v-if="onGetRightFrameActive('RightSelect')"></RightSelect>
            <RightBlock v-if="onGetRightFrameActive('RightBlock')"></RightBlock>
            <RightPen v-if="onGetRightFrameActive('RightPen')"></RightPen>
            <RightEvent v-if="onGetRightFrameActive('RightEvent')"></RightEvent>
            <RightPelData v-if="onGetRightFrameActive('RightPelData')"></RightPelData>
            <RightChannel v-if="onGetRightFrameActive('RightChannel')"></RightChannel>

         </div>

         <!--导航列表-->
         <div class="h_navigation_right" @dblclick="onLayoutHandel('LeftFold')">
            <template v-for="(item, index) in rightNavigation">
               <div class="h_navigation_button" @click.stop="onLayoutHandel(item)"
                  :class="[item.frameActive ? 'h_active' : '']" v-show="item.labelShow">
                  {{ item.label }}
               </div>
            </template>
         </div>

      </div>
   </div>
</template>

<script setup  lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { computed } from "vue";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
   onLayoutHandel,          // 布局处理器
} from "@/functions";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🍁 引入组件 ⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️⚒️
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🍁  右
import { RightPelData } from "@/views/svg/RightPelData";
import { RightChannel } from "@/views/svg/RightChannel";
import { RightSelect } from "@/views/svg/RightSelect";
import { RightBlock } from "@/views/svg/RightBlock";
import { RightPen } from "@/views/svg/RightPen";
import { RightProject } from "@/views/svg/RightProject";
import { RightEvent } from "@/views/svg/RightEvent";

/**🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾*/
// 🐸 引入存储
/**🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useProjectStore } from "@/store/projectStore"; // 工程
import { useLayoutStore } from "@/store/layoutStore"; // 布局
import { useWorkStore } from "@/store/workStore"; // 工作数据

/**👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾*/
// 🐸 使用存储
/**👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布
const projectStore = useProjectStore(); // 工程
const layoutStore = useLayoutStore(); // 布局
const workStore = useWorkStore(); // 设备数据
/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */
/** 右框参数*/
let rightFrameInfo = computed(() => layoutStore.rightFrameInfo);
/** 右框列表*/
let rightNavigation = computed(() => layoutStore.rightNavigation);

/* ================================================================================================ */
//                                ★ 函数
/* ================================================================================================ */
/** 获取右框激活状态*/
const onGetRightFrameActive = (key: string): boolean => {
   // console.log("获取右框激活状态")
   let res = false;
   let rightNavigation = layoutStore.rightNavigation;
   rightNavigation.forEach((element: any) => {
      if (element.key === key) {
         res = Boolean(element.frameActive);
      }
   });
   return res;
};

/* ================================================================================================ */
//                                ★ 钩子函数_挂载后
/* ================================================================================================ */



</script>

<style lang="scss" scoped>
.h_center_right {
   border-left: 1px solid rgb(100, 100, 100);
   height: 100%;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
}

.h_fold_button {
   margin: 0px;
   padding: 0px;
   height: 25px;
   width: 100%;
   text-align: left;
   font-size: 18px;
   border-bottom: 1px solid rgb(100, 100, 100);

   &:hover {
      cursor: pointer; // 小手指
      background-color: rgb(100, 100, 100);
   }
}


// 导航
.h_navigation {
   height: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: stretch;
   justify-content: flex-end;

   // 导航左
   .h_navigation_right {
      margin: 0px;
      padding: 0px;
      min-width: 23px;
      user-select: none;
      background-color: rgb(0, 0, 0); // 左侧导航按钮

      // 左侧导航按钮
      .h_navigation_button {
         margin-bottom: 3px;
         padding-top: 5px;
         padding-bottom: 5px;
         width: 20px;
         font-size: medium;
         text-align: center;
         background-color: rgb(50, 50, 50);
         border-left: 3px solid rgb(50, 50, 50);
         color: rgb(176, 176, 176);
         cursor: pointer; // 小手指

         &:hover {
            color: rgb(255, 255, 255);
            border-left: 3px solid rgb(0, 0, 255);
         }

         &.h_active {
            background-color: rgb(80, 80, 80);
            color: rgb(255, 255, 255);
            border-left: 3px solid #1d9f00;
         }
      }

      &:hover {
         cursor: pointer; // 小手指
      }
   }

   // 导航右
   .h_navigation_left {
      padding: 0px;
   }
}
</style>